import Vue from 'vue'
import Vuex from 'vuex'
// 1. 导入包
import createPersistedState from 'vuex-persistedstate'
// 注册vuex
// 因为vuex的数据是存储在程序内存中的, 一旦浏览器刷新, 那么就会清空内存, 所以不能实现持久化
// 本地存储可以实现数据持久化, 将数据存储在浏览器中, 只要不手动清除,那么就会一直存储在浏览器中
// 怎么使用本地存储???
// localStorage.setItem('key',value)
// localStorage.getItem(key)
Vue.use(Vuex)

// 2. 导入axios
import axios from 'axios'
// 暴露vuex实例, 创建vuex实例, 仓库是一个js对象
export default new Vuex.Store({
  // 核心配置项
  // 唯一存放数据的地方

  // 2. 配置为 vuex 的插件
  plugins: [createPersistedState()],
  state: {
    token:'',
    userInfo:{} // 5. 储存用户信息
    // {
    //   token:localStorage.getItem('token') || '' // 存储token
    // } 
  },
  getters: {
  },
  // 唯一同步修改数据的地方
  mutations: {
    // 更新token
    updateToken(state,token){
      state.token = token
      // // 将token存储到本地存储
      // localStorage.setItem('token',token)
    },
    // 4. 更新用户信息
    updateUserInfo(state,info){
      state.userInfo = info
    }
  },
  // 异步修改数据的地方
  actions: {
    // 2.1 获取用户信息, 储存在vuex中
    async initUserInfo(context){
    // context是Store的实例对象, 可以通过context.state.token || context.commit() || 
      console.log(context)
    const {data:res} = await axios.get('/my/userinfo')
    
      console.log(res)
    // 3. 将获取到的数据储存搭配vuex中, 调用mutations中的函数
    context.commit('updateUserInfo',res.data)
    }
  },
  // 模块化
  modules: {
  }
})
